<template>
    <view class="city_container">
        <view class="hotCity">
            <view class="name">热门城市</view>
            <view class="flex">
                <view class="item" v-for="item in hotCities" :key="item.cityId">{{ item.name }}</view>
            </view>
        </view>
        <van-index-bar highlight-color="#ff9a0d">
            <block v-for="(item, index) in cities" :key="index">
                <van-index-anchor :index="item.code"   v-if="item.arr.length"/>
                <van-cell :title="element.name" v-for="element in item.arr" :key="element.cityId"  v-if="item.arr.length" :data-item="element" @click="clickCityHandler"/> 
            </block>
        </van-index-bar>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import city from '@/api/city';
import useCityStore from '@/store/city'


const cityStore = useCityStore();
const cities = ref<any[]>([]);
const hotCities = ref<any[]>([]);

// 初始化cities数组
function initCities(){
    let arr = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
    arr.forEach(item => {
        cities.value.push({
            code: item,
            arr: []
        })
    })
}

async function getCityList() {
    initCities();
    try {
        let result = await city.getCityList();
        if(result && result.status === 0){
            hotCities.value = result.data.cities.filter((item: any) => item.isHot);
            // 处理返回来的数据 —— 根据26个字母进行排序
            // let arr =  sort(result.data.cities);
            // 拿到的数据进行分组
            result.data.cities.forEach((item: any) => {
                let itemCode = item.pinyin.slice(0,1).toUpperCase();
                cities.value.find(element => element.code === itemCode).arr.push(item);
            })
        }
    } catch (error) {
        console.error(error);
    }
}


// 点击城市的回调函数
function clickCityHandler(event: MouseEvent){
    // 将当前点击的城市存储到仓库中
    cityStore.setCity((event.currentTarget as any).dataset.item);
    // 返回到首页
    uni.switchTab({
        url: '/pages/index/index'
    });
}

// 冒泡排序 —— 外循环控制趟数，比较arr.length - 1趟
function sort(arr: any[]){
    for(let i = 0; i < arr.length - 1; i++){
        // 设置一个标识，当某趟在比较时，该趟的每一次比较都没有进行交换，则说明此时，数组中的顺序已经排好序了不需要继续往下执行了
        var flag = true;
        // 内循环控制每趟执行的次数：arr.length - 1 - i次
        for(let j = 0; j < arr.length - 1 - i; j++){
            if(arr[j].pinyin > arr[j+1].pinyin){
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
                flag = false;
            }
        }
        if(flag){
            break;
        }
    }
    return arr;
}

onLoad(() => {
    getCityList();
})
</script>

<style scoped lang="less">
.city_container {
    background-color: #f4f4f4;
    .hotCity {
        background-color: #fff;
        padding-left: 30rpx;
        padding-top: 30rpx;
        .name {
            font-size: 26rpx;
            color: #999;
        }
        .flex {
            flex-wrap: wrap;
            .item {
                background-color: #f4f4f4;
                font-size: 28rpx;
                padding: 10rpx 60rpx;
                margin: 20rpx 26rpx;
            }
        }
    }
}
</style>